<template>
  <view class="empty" :style="[getStyle]">
    <image :src="getSrc" class="empty__img" :style="[getImgSize]" />
    <view v-if="$slots.text" class="empty__text">
      <slot name="text" />
    </view>
    <view v-else class="empty__text">{{ tip }}</view>
    <slot name="bottom">
      <view v-if="showBtn" class="empty__btn">
        <m-button hover-class="none" height="72rpx" width="184rpx" @click="handleGo">{{ $t(buttonTxt) }}</m-button>
      </view>
    </slot>
  </view>
</template>

<script lang="ts">
import { defineComponent, computed } from '@vue/composition-api'
import addColor from '@/utils/add-color'

export default defineComponent({
  props: {
    tip: {
      type: String,
      default: '抱歉，还没有任何数据哦!',
    },
    showBtn: {
      type: Boolean,
      default: false,
    },
    type: {
      type: String,
      default: 'search',
    },
    background: {
      type: String,
      default: 'transparent',
    },
    marginTop: {
      type: [String, Number],
      default: 160,
    },
    width: {
      type: String,
      default: '294rpx',
    },
    height: {
      type: String,
      default: '188rpx',
    },
    buttonTxt: {
      type: String,
      default: '去逛逛',
    },
    img: {
      type: String,
      default: 'empty.png',
    },
  },
  setup(props, { emit }) {
    const { background } = props

    const getStyle = computed(() => {
      return {
        background: addColor(background),
        marginTop: props.marginTop + 'rpx',
      }
    })

    const getImgSize = computed(() => {
      return {
        width: props.width,
        height: props.height,
      }
    })

    const getSrc = computed(() => {
      return require(`@/static/${props.img}`)
    })

    const handleGo = (e) => {
      emit('click', e)
    }
    return { getStyle, handleGo, getImgSize, getSrc }
  },
})
</script>
<style lang="scss">
.empty {
  text-align: center;
  &__img {
    width: 240rpx;
    height: 240rpx;
  }
  &__text {
    font-size: rpx($--font-md-fz);
    font-weight: 400;
    color: $--font-secondary-c;
    line-height: 40rpx;
    margin-top: 32rpx;
  }
  &__btn {
    margin-top: 44rpx;
  }
}
</style>
